<template>
  <div class="all" @click="closeLogin" >
    <Blog_detailVue     
      v-for="i in this.$store.state.blogs"
      :key="i.id"
      :title="i.title"
      :like="i.like"
      :comment="i.search.length"
      :date="realtime(i.time)"
      :tag="i.tag"
      :self="i"
    />
    <FooterVue id="Foot" :context="footerTip"  />
  </div>
</template>

<script>
import blog from "../api/GetBlogs.js";
import Blog_detailVue from "../re_components/Blog_detail.vue";
import FooterVue from "../re_components/Footer.vue";
import { time } from "../utils/time";
export default {
  name: "Blog_list",
  components: { Blog_detailVue, FooterVue },
  data(){
    return {
      interval:"",
      footerTip:"加载中~~"
    }
  },
  methods: {
    realtime(val) {
      return time(val);
    },
    closeLogin(){
      this.$store.commit("changeshow", false)
    }
  },
  mounted() {
    if (sessionStorage.getItem("blogs")) {
      this.$store.commit(
        "setBlogId",
        JSON.parse(sessionStorage.getItem("blogs_id"))
      );
      this.$store.commit(
        "initBlogs",
        JSON.parse(sessionStorage.getItem("blogs"))
      );
    }
    this.interval = setInterval(() => {
      // 博客列表滑动至底加载
      const pageHeight = document.documentElement.clientHeight;
      let el = document.getElementById("Foot");
      const contentTop = el.getBoundingClientRect().top;
      const contentHeight = el.offsetHeight;
      if (
        (contentTop < pageHeight && contentTop >= 0) ||
        (contentTop < 0 && contentTop + contentHeight > 0)
      ) {
        if (!this.$store.state.blogFinish) {
          let params = new URLSearchParams();
          params.append("page", this.$store.state.blogs_id);
          blog(params).then((res) => {
            if (res.data.infomation.length !== 0) {
              this.$store.commit("addBlogs", res.data.infomation);
              sessionStorage.setItem(
                "blogs",
                JSON.stringify(this.$store.state.blogs)
              );
              sessionStorage.setItem(
                "blogs_id",
                JSON.stringify(this.$store.state.blogs_id)
              );
              console.log(this.$store.state.blogs, this.$store.state.blogs_id);
            }else{
              this.$store.commit("BlogFinish")
              this.footerTip = "我是有底线的哦~~"
            }
          });
        }
      }
    }, 2000);
  },
  computed: {},
  beforeDestroy(){
    clearInterval(this.interval)
  }
};
</script>

<style lang="less" scoped>
@import "../main.less";
.all {
  height: 100%;
  width: 100%;
  overflow: auto;
  /*IE下隐藏滚动条*/
  -ms-overflow-style: none;
  /*火狐下隐藏滚动条*/
  overflow: -moz-scrollbars-none;
  scrollbar-width: none;
}
</style>